<template>
  <el-dropdown trigger="click">
    <i
      class="iconfont icon-zhongyingwenqiehuan-zhongwen"
      :style="{ 'font-size': size + 'px' }"
    />
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="item in languages"
          :key="item.value"
          :disabled="language === item.value"
        >
          <span @click="handleChangeLang(item.value)">{{ item.name }}</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store/app'
import { useI18n } from 'vue-i18n'
import { computed } from 'vue'

defineProps({
  size: {
    required: false,
    type: [String, Number],
    default () {
      return 18
    }
  }
})

const { locale } = useI18n()

interface Language {
  name: string,
  value: string
}
const languages: Array<Language> = [
  {
    name: '英文',
    value: 'en'
  },
  {
    name: '中文',
    value: 'zh'
  }
]

const store = useAppStore()
const language = computed(() => {
  return store.language
})

const handleChangeLang = (val: string) => {
  locale.value = val
  store.SetLanguage(val)
}
</script>

<style lang="scss" scoped>
.el-dropdown {
  cursor: pointer;
}
</style>
